<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <!-- 导航栏 -->
      <el-menu
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu"
      >
        <!-- 首页 -->
        <!-- <el-menu-item
          index="home"
          class="homeRoute"
          @click="$router.push({ name: 'home' })"
        >
          <img src="../../static/img/home2@2x.png" alt="" class="svgHome" />
          <span slot="title">首页</span>
        </el-menu-item>

        <el-menu-item
          index="commission_default"
          class="homeRoute"
          @click="$router.push({ name: 'commission_default' })"
        >
          <img src="../../static/img/homework2@2x.png" alt="" class="svgHome" />
          <span slot="title">作业管理</span>
        </el-menu-item>

        <el-menu-item
          index="examination"
          class="homeRoute"
          @click="$router.push({ name: 'examination' })"
        >
          <img
            src="../../static/img/examination2@2x.png"
            alt=""
            class="svgHome"
          />
          <span slot="title">体检管理</span>
        </el-menu-item>

        <el-menu-item
          index="curriculum"
          class="homeRoute"
          @click="$router.push({ name: 'curriculum' })"
        >
          <img
            src="../../static/img/curriculum2@2x.png"
            alt=""
            class="svgHome"
          />
          <span slot="title">课程管理</span>
        </el-menu-item>

        <el-menu-item
          index="user-setting"
          class="homeRoute"
          @click="$router.push({ name: 'user-setting' })"
        >
          <img
            src="../../static/img/user-setting2@2x.png"
            alt=""
            class="svgHome"
          />
          <span slot="title">用户管理</span>
        </el-menu-item>

        <el-menu-item
          index="course-recommen"
          class="homeRoute"
          @click="$router.push({ name: 'course-recommen' })"
        >
          <img
            src="../../static/img/course-recommen2@2x.png"
            alt=""
            class="svgHome"
          />
          <span slot="title">推荐课程</span>
        </el-menu-item>

        <el-menu-item
          index="hardware"
          class="homeRoute"
          @click="$router.push({ name: 'hardware' })"
        >
          <icon-svg name="home" class="svgHome"></icon-svg>
          <img src="../../static/img/hardware2@2x.png" alt="" class="svgHome" />
          <span slot="title">硬件管理</span>
        </el-menu-item>

        <el-menu-item
          index="achieventment"
          class="homeRoute"
          @click="$router.push({ name: 'achieventment' })"
        >
          <img
            src="../../static/img/achieventment2@2x.png"
            alt=""
            class="svgHome"
          />
          <span slot="title">上传成绩</span>
        </el-menu-item>

        <el-menu-item
          index="tice"
          class="homeRoute"
          @click="$router.push({ name: 'tice' })"
        >
          <img src="../../static/img/tice2@2x.png" alt="" class="svgHome" />
          <span slot="title">体质管理</span>
        </el-menu-item>

        <el-menu-item
          index="diet"
          class="homeRoute"
          @click="$router.push({ name: 'diet' })"
        >
          <img src="../../static/img/diet2@2x.png" alt="" class="svgHome" />
          <span slot="title">饮食管理</span>
        </el-menu-item>

        <el-menu-item
          index="healthy"
          class="homeRoute"
          @click="$router.push({ name: 'healthy' })"
        >
          <img src="../../static/img/healthy2@2x.png" alt="" class="svgHome" />
          <span slot="title">健康报告</span>
        </el-menu-item>

        <el-menu-item
          index="class_train"
          class="homeRoute"
          @click="$router.push({ name: 'class_train' })"
        >
          <img
            src="../../static/img/curriculum2@2x.png"
            alt=""
            class="svgHome"
          />
          <span slot="title">课程训练</span>
        </el-menu-item>

        <el-menu-item
          index="work-rest"
          class="homeRoute"
          @click="$router.push({ name: 'work-rest' })"
        >
          <img
            src="../../static/img/work-rest2@2x.png"
            alt=""
            class="svgHome"
          />
          <span slot="title">作息管理</span>
        </el-menu-item>

        <el-menu-item
          index="exam"
          class="homeRoute"
          @click="$router.push({ name: 'exam' })"
        >
          <img
            src="../../static/img/work-rest2@2x.png"
            alt=""
            class="svgHome"
          />
          <span slot="title">考试管理</span>
        </el-menu-item> -->

        <!-- <el-menu-item
          index="exam"
          class="homeRoute"
          @click="$router.push({ name: 'exam' })"
        >
          <img
            src="../../static/img/work-rest2@2x.png"
            alt=""
            class="svgHome"
          />
          <span slot="title">考试管理</span>
        </el-menu-item> -->

        <!-- 动态路由管理 -->
        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes"
        >
        </sub-menu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
import { isURL } from '@/utils/validate'
export default {
  data() {
    return {
      dynamicMenuRoutes: [],
      userRoleId: '',
      one: true
    }
  },
  components: {
    SubMenu
  },
  computed: {
    sidebarLayoutSkin: {
      get() { return this.$store.state.common.sidebarLayoutSkin }
    },
    sidebarFold: {
      get() { return this.$store.state.common.sidebarFold }
    },
    menuList: {
      get() { return this.$store.state.common.menuList },
      set(val) { this.$store.commit('common/updateMenuList', val) }
    },
    menuActiveName: {
      get() { return this.$store.state.common.menuActiveName },
      set(val) { this.$store.commit('common/updateMenuActiveName', val) }
    },
    mainTabs: {
      get() { return this.$store.state.common.mainTabs },
      set(val) { this.$store.commit('common/updateMainTabs', val) }
    },
    mainTabsActiveName: {
      get() { return this.$store.state.common.mainTabsActiveName },
      set(val) { this.$store.commit('common/updateMainTabsActiveName', val) }
    }
  },
  watch: {
    // $route: 'routeHandle'
    $route: {
      handler(route) {
        try {
          this.routeHandle(route)
        } catch (error) {
        }
      },
      deep: true
    }
  },
  created() {
    this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
    // 系统管理子路由

    this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
    this.routeHandle(this.$route)
    this.userRoleId = sessionStorage.getItem('userRoleId')
    // console.log('dynamicMenuRoutes', this.dynamicMenuRoutes)
  },
  methods: {
    // 路由操作
    routeHandle(route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter(item => item.name === route.name)[0]
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
            if (!route) {
              return console.error('未能找到可用标签页!')
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
            iframeUrl: route.meta.iframeUrl || '',
            params: route.params,
            query: route.query
          }
          this.mainTabs = this.mainTabs.concat(tab)
        }
        // 垃圾代码，卡了我几个小时
        // this.menuActiveName = tab.name
        this.mainTabsActiveName = tab.name
      }
    }
  }
}
</script>

<style scoped>
.svgHome {
  /* width: 24px; */
  margin-right: 0.026rem;
  text-align: center;
  /* font-size: 16px; */
  width: 0.1042rem;
  height: 0.1042rem;
  color: inherit !important;
}

.site-wrapper .svgHome {
  font-size: 0.0833rem;
}
.site-sidebar--fold .svgHome {
  font-size: 0.1302rem;
}
/* .el-menu-item > img {
  width: 20px;
} */
.site-sidebar .homeRoute span {
  margin-left: 0.026rem;
}
/* .el-menu {
  border-top: none;
  margin-top: 0.1198rem;
} */
li.el-menu-item.homeRoute {
  padding: 0 0 0 0.1302rem !important;
}
::-webkit-scrollbar {
  width: 0rem;
  height: 0.0052rem;
}
</style>